import { FC, useContext, useEffect, useState } from 'react'
import { ExclamationCircleOutlined } from '@ant-design/icons'
import { Comment, Avatar, Modal, message } from 'antd'
import { TComment } from '@type'
import { formatTime } from '@/util'
import axios from 'axios'
import { AppContext } from '@/App'
const { confirm } = Modal
const Remark: FC<{ commentId: number; blogId: number }> = ({ commentId, blogId }) => {
  const [remarkList, setRemarkList] = useState<TComment[]>([])
  const {
    store: { username }
  } = useContext(AppContext)
  const showDeleteConfirm = (id: number) => {
    confirm({
      title: '删除评论?',
      icon: <ExclamationCircleOutlined />,
      content: '你确定要删除该评论？',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        deleteComment(id)
      }
    })
  }
  useEffect(() => {
    getRemarkList()
  }, [])
  const getRemarkList = () => {
    axios
      .get('/recomment/search', {
        params: {
          commentId,
          blogId
        }
      })
      .then(res => {
        console.log(res)
        res.data.error === -1 ? setRemarkList(res.data.data) : setRemarkList([])
      })
  }
  const deleteComment = (id: number) => {
    axios
      .post('/recomment/del', {
        id,
        username
      })
      .then(res => {
        console.log(res)
        if (res.data.error === -1) {
          message.success('删除成功')
          getRemarkList()
        } else {
          message.error('删除失败')
        }
      })
  }
  return (
    <>
      {remarkList.map(item => (
        <Comment
          key={item.id}
          author={<a>{item.realname}</a>}
          avatar={<Avatar src={item.avatar} alt="Han Solo" />}
          content={<p>{item.content}</p>}
          datetime={<span>{formatTime(item.time)}</span>}
          actions={[
            <a onClick={() => showDeleteConfirm(item.id)} style={{ color: 'red' }}>
              删除
            </a>
          ]}
        ></Comment>
      ))}
    </>
  )
}
export default Remark
